<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>js入门</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <div class="box">hello</div>
    <div class="name">name</div>
    <div class="age">age</div>
    <div class="gender">gender</div>
    <div class="height">height</div>
    <div class="phone">phone</div>
    <!-- 声明script标签，在其中定义内部js代码 -->
    <script type="text/javascript">
      // 1 修改box元素的内容
      // 声明变量msg他的值是hello world
      let msg = 'hello world'
      // 找类名box的元素数组
      let boxArray = document.getElementsByClassName('box')
      // 取出数组中的第一个元素，其实就是div.box元素
      let box = boxArray[0]
      // 修改box元素中的html内容
      box.innerHTML = msg

      // 2 修改phone元素的内容
      // 声明一个电话变量
      let phone = '13877779999'
      // 找phone元素数组
      let phoneArray = document.getElementsByClassName('phone')
      // 取出phone元素数组中第一个元素，其实就是div.phone元素
      let phoneElement = phoneArray[0]
      phoneElement.innerHTML = phone

      // 3 修改age的值
      // 声明变量age
      let age = 20
      // 找到age数组
      let ageArray = document.getElementsByClassName('age')
      // 取出age元素数组中第一个元素，其实就是div.age元素
      let ageElement = ageArray[0]
      // 修改div.age的html内容
      ageElement.innerHTML = age

      let gender = '男'
      let height = 172
      let name = 'admin'
      document.getElementsByClassName('gender')[0].innerHTML = gender
      document.getElementsByClassName('height')[0].innerHTML = height
      document.getElementsByClassName('name')[0].innerHTML = name
    </script>
  </body>
</html>
